<template>
	<view >
		<view class="mar-t48 tabs-box">
			 <u-tabs
				:list="tabsList"
				lineColor="#FF7171"
				lineHeight="10rpx"
				:activeStyle="{
					color: '#111111',
					fontWeight: 'bold',
					transform: 'scale(1.03)'
				}"
				:current="tbsCurrent"
				@change="tabsChange"
			>
			</u-tabs>
		</view>
		<view class="" v-if="!tbsCurrent">
			<view class="list-box mar-t32 pad-b100 ">
				<u-radio-group
					v-model="radioItem"
					placement="column"
				>
					<view 
						class="list-li flex-a ju-bt " 
						v-for="(item, index) in 15"
						:kay="index"
						:class="{'mar-t40': index}"
						@click="radioItem = item"
					>
						<view class="flex-a">
							<u-radio
							  :name="item"
							  size="40rpx"
							>
							</u-radio>
							<view class="li-label">
								瓷肌美白 通透亮肤
							</view>
						</view>
						<view class="li-time">
							约1小时30分钟
						</view>
					</view>
				</u-radio-group>
				
			</view>
			<view class="li-fot-box flex-a ju-bt w_100 padlr24 pad-b10 bg-f">
				<view class="">
					<view class="flex-a fot-tips">
						<u-icon 
							name="error-circle" 
							color="#000000" 
							size="44rpx"
						></u-icon>
						<text class="mar-l10">您还未选择预约项目</text>
					</view>
				</view>
				<view class="li-fot-btn flex-center" @click="onNext">
					下一步
				</view>
			</view>
		</view>
		<view class="list-home flex flex-wrap">
			<view 
				class="home-li mar-t28" 
				v-for="(item, index) in 5" 
				:key="index"
				@click="$goRouter('/pages/subscribe/pages/onsiteServicesDetail')"
			>
				<u--image
					:showLoading="true" 
					:src="getImg('swiper-img')" 
					width="100%"
					height="260rpx"
				></u--image>
				<view class="home-tit mar-t14">
					瓷肌美白通透亮肤护理套装
				</view>
				<view class="home-price flex-a ju-bt mar-t14">
					<view class="price-txt">
						<text class="f-s28">¥</text>
						<text class="f-s42">1980</text>
						<text class="price-sale mar-l10 txt-del">¥2980</text>
					</view>
					<view class="price-sale">
						已售233
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ItemList", // 项目列表
		data() {
			return {
				tabsList: [
					{
						name: "我的项目"
					},
					{
						name: "上门专享"
					},
				],
				tbsCurrent: 1,
				radioItem: "",
			}
		},
		methods: {
			onNext() {
				this.$goRouter('/pages/subscribe/pages/appointmentTime')
			},
			tabsChange(eve) {
				this.tbsCurrent = eve.index
				console.log(eve, "--ev");
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-home {
		.home-li {
			.price-txt {
				font-family: MiSans, MiSans;
				font-weight: 500;
				color: #FF7171;
			}
			.home-price {
				.price-sale {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.home-tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
			width: calc(50% - 9rpx);
			&:nth-child(even) {
				margin-left: 9rpx;
			}
			&:nth-child(odd) {
				margin-right: 9rpx;
			}
		}
	}
	.li-fot-box {
		position: fixed;
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		bottom: 0;
		/* #endif */
		left: 0;
		.li-fot-btn {
			width: 196rpx;
			height: 72rpx;
			background: #FF7171;
			border-radius: 54rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.fot-tips {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #666666;
			line-height: 38rpx;
		}
	}
	.list-box {
		
		.li-label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
		}
		.li-time {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
		}
	}
</style>